import { Card, Table } from 'antd'
import { DownOutlined, RightOutlined } from '@ant-design/icons'
import { ColumnsType } from 'antd/lib/table'
import React, { useState, useEffect } from 'react'
import { IDictList } from '@api/hospital/model/hospitalListTypes'
import { getCityOrDict } from '@api/hospital/hospitalList'
export default function Dict() {
    const columns: ColumnsType<any> = [
        {
            title: '名称',
            dataIndex: 'name'
        },
        {
            title: '编码',
            dataIndex: 'dictCode'
        },
        {
            title: '值',
            dataIndex: 'value'
        },
        {
            title: '创建时间',
            dataIndex: 'createTime'
        },
    ]
    // 定义列表状态
    let [dictList, setDictList] = useState<IDictList>([])
    async function _getDictList() {
        let res = await getCityOrDict('1')
        setDictList(res)
        console.log(res)
    }
    useEffect(() => {
        _getDictList()
    }, [])
    return (
        <Card>
            <Table
                rowKey={'id'}
                bordered
                columns={columns}
                dataSource={dictList}
                pagination={false}
                expandable={{
                    expandIcon: ({ expanded, onExpand, record }) => {
                        // 1. expanded: 布尔值：当行展开时，值为真，未展开值为假
                        // console.log(expanded)
                        // 2. onExpand： 是一个函数，当点击展开图标时，触发执行  onExpand(record,e)
                        // console.log('onExpand',onExpand)
                        // 3. record：当前行对象
                        // console.log('record', record)
                        // 当一个节点没有子节点的时候，不渲染任何图标
                        if(!record.hasChildren){
                            return <div style={{display:'inline-block',width:25}}></div>
                        }
                        return expanded ?
                            (<DownOutlined style={{ marginRight: 10 }} onClick={e=>onExpand(record,e)} />)
                            :
                            (<RightOutlined style={{ marginRight: 10 }} onClick={async e=>{
                                // 0. 要判断是否有childrend,children的长度是不是0
                                if(!record.children?.length){
                                    // 1. children数组的长度为0，或没有，发送ajax请求
                                    let childrenList = await getCityOrDict(record.id)
                                    // console.log(childrenList)
                                    // 2. childrenList，每一条记录，判定hasChildren属性，来决定添加 children属性的添加
                                    childrenList = childrenList.map(item=>{
                                        return item.hasChildren ? {...item,children:[]} : item
                                    })
                                    // 3. 将请求会来的数据，添加到当前记录的children属性上
                                    record.children = childrenList
                                }
                                // 4. 使用onExpand展开子节点
                                onExpand(record, e)
                            }}/>)
                    }
                }}
            />
        </Card>
    )
}
